// JQ 入口函数
$(() => {
  // 1.0 给提交按钮绑定点击事件
  $('.input_sub').on('click', (e) => {
    // 2.0 注意：阻止默认的提交行为
    e.preventDefault()
    // 3.0 获取表单的数据
    const username = $('.input_txt').val().trim()
    const password = $('.input_pass').val().trim()
    // 测试数据是否获取成功
    // console.log({ username, password })
    // 用于存放加载状态 id 的变量
    let loadId = 0
    // 4.0 根据接口文档发送 ajax 请求
    $.ajax({
      type: 'post',
      url: 'http://localhost:8080/api/v1/admin/user/login',
      data: { username, password }, // 🎈采用了对象简写方式
      // 请求发送前
      beforeSend: () => {
        console.log('请求发送前beforeSend，显示加载中...')
        // 调用加载状态
        loadId = layer.load()
      },
      // 请求完成
      complete: () => {
        console.log('请求完成complete，隐藏加载中')
        // console.log(loadId);
        // 关闭加载状态
        layer.close(loadId)
      },
      // 5.0 请求成功
      success: (res) => {
        console.log(res)
        // 5.1 判断是否有 token (登录成功才会有 token，通行凭证)
        if (res.token) {
          // 5.1.1 把 token 保存到本地存储中，方便其他页面获取 token
          localStorage.setItem('token', res.token)
          // 🧨 5.1.2 跳转到首页，这里的路径是相对于浏览器的地址栏
          window.location.href = './index.html'
        } else {
          // 5.2 没有 token 就根据后端返回的信息提示用户，用 layer.alert() 弹窗体验更好
          layer.alert(res.msg)
        }
      },
    })
  })
})
